<template>
    <!-- 评论 -->
    <view v-if="item.parentCommentId === 0" class="comment-container" @tap="readyToInput(item)">
        <image :src="item.avatarUrl" class="avatar"></image>
        <view class="content">
            <view class="user-name">{{ item.nickname }}</view>
            <view class="text">{{ item.commentContent }}</view>
            <view class="btm">
                <view>{{ item.commentTime.slice(0, 10) }}</view>
                <view>回复</view>
            </view>
        </view>
    </view>

    <view v-else class="reply" @tap="readyToInput(parentItem)">
        <view class="comment-container">
            <image :src="item.avatarUrl" class="avatar"></image>
            <view class="content">
                <view class="user-name">{{ item.nickname }}</view>
                <view class="text">
                    <text class="reply">回复{{ parentItem.nickname }}:</text> {{ item.commentContent }}
                </view>
                <view class="btm">
                    <view>{{ item.commentTime.slice(0, 10) }}</view>
                    <view>回复</view>
                </view>
            </view>
        </view>
    </view>

    <view class="replies" v-if="item.replies.length > 0">
        <CustomComment v-for="(reply, index) in item.replies" :key="index" :item="reply" :parentItem="item"
            @tap="readyToInput(reply)" />
    </view>

</template>
<script setup lang="ts">
import type { Comment } from '@/type/article';
import CustomComment from '@/components/CustomComment.vue';

const props = defineProps<{
    parentItem: Comment
    item: Comment
}>();
const emit = defineEmits(['inputComment'])
//通知输入框我要准备评论了，调起评论框
const readyToInput = (item: Comment) => {
    emit('inputComment', item);
}

</script>
<style scoped lang="scss">
.reply {
    margin-left: 50rpx;

    .comment-container {
        box-sizing: border-box;
        width: 100%;
        font-size: 28rpx;
        color: $color-title;
        display: flex;
        margin: 10rpx 0;

        .avatar {
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
            margin-right: 20rpx;
        }

        .content {
            width: 100%;

            .user-name {
                color: #aaa;
            }

            .text {
                margin: 20rpx 0;
                word-wrap: break-word;

                .reply {
                    margin: 0;
                    color: #aaa;

                }
            }

            .btm {
                display: flex;
                justify-content: space-between;
                margin: 10rpx 0;
                font-size: 24rpx;
                color: #aaa;
            }
        }
    }
}

.comment-container {
    margin: 10rpx 0;
    box-sizing: border-box;
    width: 100%;
    font-size: 28rpx;
    color: $color-title;
    display: flex;

    .avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        margin-right: 20rpx;
    }

    .content {
        width: 100%;

        .user-name {
            color: #aaa;
        }

        .text {
            margin: 20rpx 0;
            word-wrap: break-word;
        }

        .btm {
            display: flex;
            justify-content: space-between;
            margin: 10rpx 0;
            font-size: 24rpx;
            color: #aaa;
        }
    }
}
</style>
